<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
    <head>
        <title>3ataba shopping</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="css/images/favicon.ico" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
        <!--[if IE 6]>
                <script type="text/javascript" src="js/png-fix.js"></script>
        <![endif]-->
        <script type="text/javascript" src="js/functions.js"></script>


    </head>

    <body>
        <div id="header" class="shell">
            <div id="logo">
                <h1>
                    <a href="index.jsp">3ataba shopping</a>
                </h1>
            </div>
            <br>
            <div id="signup" align="center">
                <h3>Sign up</h3>
                <br><br><br>
                <label>First name</label><br>
                <input type="text" id="fname" class="field" value="" />
                <br><br>
                <label>Last name</label><br>
                <input type="text" id="lname"  class="field" value="" />
                <br><br>
                <label>Username</label><br>
                <input type="text" id="uname"  class="field" value=""  />
                <br><br>
                <label>Email</label><br>
                <input type="email" id="email"  class="field" value="" />
                <br><br>
                <label>Address</label><br>
                <input type="text" id="address" class="field" value=""  />
                <br><br>
                <label>Password</label><br>
                <input type="password" id="password"  class="field" value="" />
                <br><br>
                <label>Confirm password</label><br>
                <input type="password" id="cpassword" class="field" value="" />
                <br><br>
                <label>Birth Date</label><br>
                <input type="date" id="birthdate" class="field" value=""  />
                <br><br>
                <label>Mobile</label><br>
                <input type="tel" id="mobile" class="field" value=""  />
                <br><br>
                <label>Credit balance</label><br>
                <input type="number" id="cbalance" class="field" value=""  />
                <br><br><br>
                <input type="button" id="signupbtn" value="Sign up"  class="submit-btn" />

            </div>
        </div>
        <script>
            $(document).ready(function() {
                var fname = $("#fname");
                var lname = $("#lname");
                var uname = $("#uname");
                var email = $("#email");
                var password = $("#password");
                var cpassword = $("#cpassword");
                var address = $("#address");
                var birthdate = $("#birthdate");
                var mobile = $("#mobile");
                var cbalance = $("#cbalance");

                fname.blur(validatefName);
                lname.blur(validatelName);
                uname.blur(validateuName);
                email.blur(validateEmail);
                password.blur(validatePass1);
                cpassword.blur(validatePass2);
                address.blur(validateaddress);
                birthdate.blur(validatebirthdate);
                mobile.blur(validatenumber);
                cbalance.blur(validatecbalance);
                //On key press
                fname.keyup(validatefName);
                lname.keyup(validatelName);
                uname.keyup(validateuName);
                email.keyup(validateEmail);
                password.keyup(validatePass1);
                cpassword.keyup(validatePass2);
                address.keyup(validateaddress);
                birthdate.keyup(validatebirthdate);
                mobile.keyup(validatenumber);
                cbalance.keyup(validatecbalance);



                $("#signupbtn").click(function() {

                    if (validatefName() & validatelName() & validateuName() & validateEmail() & validatePass1() & validatePass2()
                            & validateaddress() & validatebirthdate() & validatenumber() & validatecbalance()) {
                            var data={
                                fname : $("#fname").val(),
                                lname : $("#lname").val(),
                                uname : $("#uname").val(),
                                email : $("#email").val(),
                                password : $("#password").val(),
                                address : $("#address").val(),
                                birthdate : $("#birthdate").val(),
                                mobile : $("#mobile").val(),
                                balance : $("#cbalance").val()
                            }
                        $.post("ServletSignUp", data, function(data, status, request) {
                            if (status == "success") {
                                if(data ==="done"){
                                   window.location.assign("index.jsp"); 
                                }else{
                                    alert(data);
                                }
                                    
                            }
                        });
                    }



                });



                //validation functions
                function validateEmail() {
                    //testing regular expression
                    var a = $("#email").val();
                    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
                    //if it's valid email
                    if (filter.test(a)) {
                        email.removeClass("error");
                        return true;
                    }
                    //if it's NOT valid
                    else {
                        email.addClass("error");
                        return false;
                    }
                }
                function validatefName() {
                    //if it's NOT valid
                    if (fname.val().length < 4) {
                        fname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        fname.removeClass("error");
                        return true;
                    }
                }
                function validatelName() {
                    //if it's NOT valid
                    if (lname.val().length < 4) {
                        lname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        lname.removeClass("error");
                        return true;
                    }
                }
                function validateuName() {
                    //if it's NOT valid
                    if (uname.val().length < 4) {
                        uname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        uname.removeClass("error");
                        return true;
                    }
                }
                function validatePass1() {


                    //it's NOT valid
                    if (password.val().length < 5) {
                        password.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        password.removeClass("error");
                        validatePass2();
                        return true;
                    }
                }
                function validatePass2() {

                    //are NOT valid
                    if (password.val() != cpassword.val()) {
                        cpassword.addClass("error");
                        return false;
                    }
                    //are valid
                    else {
                        cpassword.removeClass("error");
                        return true;
                    }
                }
                function validateaddress() {
                    //it's NOT valid
                    if (address.val().length < 4) {
                        address.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        address.removeClass("error");
                        return true;
                    }
                }
                function validatebirthdate() {
                    //it's NOT valid
                    if (birthdate.val().length < 4) {
                        birthdate.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        birthdate.removeClass("error");
                        return true;
                    }
                }
                function validatecbalance() {
                    //it's NOT valid
                    if (cbalance.val().length < 4) {
                        cbalance.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        cbalance.removeClass("error");
                        return true;
                    }
                }
                function validatenumber() {
                    //it's NOT valid
                    if (mobile.val().length < 4 || mobile.val().length > 11) {
                        mobile.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        mobile.removeClass("error");
                        return true;
                    }
                }






            });
        </script>
    </body>
</html>
